import QtQuick 2.0
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0

Popup {
    onOpened: {
        showAnimation.restart()
    }

    background: Rectangle {
        anchors.fill: parent
        color: "#1b1b23"
        radius: 10
        border.width: 1
        border.color: "#75777f"
        Image {
            id: loginClose
            source: "qrc:/img/Resources/title/close.png"
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.topMargin: 30
            anchors.rightMargin: 30
            width: 40
            height: 40
            layer.enabled: false
            layer.effect: ColorOverlay {
                source: loginClose
                color: "white"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    loginClose.layer.enabled = true
                    cursorShape = Qt.PointingHandCursor
                }
                onExited: {
                    loginClose.layer.enabled = false
                    cursorShape = Qt.ArrowCursor
                }
                onClicked: {
                    loginPopup.close()
                }
            }
        }

        // 标题
        Label {
            id: loginText
            text: qsTr("扫码登录")
            color: "white"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 100
            font.bold: true
            font.family: "黑体"
            font.pixelSize: 32
        }

        Image {
            id: pic
            x: 180
            y: 200
            source: "qrc:/img/Resources/mainPopups/poker.png"
            width: 250
            height: 300
        }

        Image {
            id: qrcode
            x: 200
            y: 200
            source: "qrc:/img/Resources/mainPopups/qrcode.png"
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    if (!showAnimation.showFlag) {
                        showAnimation.showFlag = true
                        showAnimation.start()
                    }
                }
                onExited: {
                    showAnimation.showFlag = false
                    showAnimation.start()
                }
            }
        }

        Label {
            visible: qrcode.scale === 1 || qrcode.scale === 1.5
            anchors.top: qrcode.bottom
//            anchors.right: qrcode.left
//            anchors.left: qrcode.right
            anchors.topMargin: showAnimation.showFlag ? 20 : 50
            anchors.horizontalCenter: qrcode.horizontalCenter
            wrapMode: Text.WrapAnywhere
            horizontalAlignment: Text.AlignHCenter
            textFormat: Text.RichText
            text: qsTr("使用网易云APP扫码登录")
            color: "white"
            font.pixelSize: 20
            width: qrcode.implicitWidth
        }

        ParallelAnimation {
            id: showAnimation
            property bool showFlag: true
            NumberAnimation {
                target: pic
                properties: "x"
                duration: 500
                from: showAnimation.showFlag ? (loginPopup.width - pic.implicitWidth) / 2 : 10
                to: showAnimation.showFlag ? 10 : (loginPopup.width - pic.implicitWidth) / 2
            }
            NumberAnimation {
                target: pic
                properties: "y"
                duration: 500
                from: showAnimation.showFlag ? (loginPopup.width - qrcode.implicitWidth) / 2 : 180
                to: showAnimation.showFlag ? 180 : (loginPopup.width - qrcode.implicitWidth) / 2
            }
            NumberAnimation {
                target: pic
                properties: "opacity"
                duration: 500
                from: showAnimation.showFlag ? 0 : 1
                to: showAnimation.showFlag ? 1 : 0
            }
            NumberAnimation {
                target: qrcode
                properties: "x"
                duration: 500
                from: showAnimation.showFlag ? (loginPopup.height - qrcode.implicitHeight) / 3 : 250
                to: showAnimation.showFlag ? 250 : (loginPopup.height - qrcode.implicitHeight) / 3
            }
            NumberAnimation {
                target: qrcode
                properties: "scale"
                duration: 500
                from: showAnimation.showFlag ? 1.5 : 1
                to: showAnimation.showFlag ? 1 : 1.5
            }
        }

        Text {
            color: "#75777f"
            text: qsTr("选择其他方式登录 〉")
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 50
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 20
            font.family: ""
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    cursorShape = Qt.PointingHandCursor
                }
                onExited: {
                    cursorShape = Qt.ArrowCursor
                }
                onClicked: {
                    loginPopup.close()
                    loginByOtherMeansPopup.open()
                }
            }
        }
    }
}
